import { useQuery } from 'react-query';
import { request } from '@/request';
import { useParams, useHistory } from 'react-router-dom';
import { CircleContainer } from '@/components';
import { toLocalTime, genNameDic } from '@/utils';
import {
   InfoIcon,
   UserIcon,
   MembersIcon,
   DateIcon,
   EditIcon,
} from '@/components/icons';
import DetailBtnContainer from '@/components/Layout/DetailBtnContainer';
import useGlobalVar from '@/hooks/useGlobalVar';
import {
   ComposedChart,
   Bar,
   XAxis,
   YAxis,
   CartesianGrid,
   ResponsiveContainer,
} from 'recharts';

const GroupDetail = () => {
   let { id } = useParams();
   const history = useHistory();
   const { user } = useGlobalVar();

   const { data } = useQuery(`/groups/${id}`, async () =>
      request(`/groups/${id}`)
   );

   const goEdit = () => {
      history.push(`/group/${id}`);
   };

   if (!data) return <div>Loding...</div>;

   const group = data.data;
   const nameDic = genNameDic(group.members);

   const chartData = [
      {
         name: '总预算',
         value: group.budget,
      },
      {
         name: '总支出',
         value: group.spend,
      },
   ];

   return (
      <>
         <div className="text-lg mb-2">{group.group_name}</div>
         <div className="my-2 border-t h-0 border-dashed"></div>
         <div className="flex flex-col items-center gap-1 my-2 text-sm color-disabled">
            <div className="w-full flex-base">
               <span className="flex">
                  <UserIcon size={18} />
                  <span className="ml-1">创建人</span>
               </span>
               <span>{nameDic[group.createdBy]}</span>
            </div>
            <div className="w-full flex-base">
               <span className="flex">
                  <DateIcon size={18} />
                  <span className="ml-1">创建时间</span>
               </span>
               <span>{toLocalTime(group.createdAt)}</span>
            </div>
            <div className="w-full flex-base">
               <span className="flex">
                  <InfoIcon size={18} />
                  <span className="ml-1">描述</span>
               </span>
               <span>{group.desc}</span>
            </div>
            <div className="w-full flex-base">
               <span className="flex">
                  <MembersIcon size={18} />
                  <span className="ml-1">成员</span>
               </span>
               <span>
                  {group.members.map((item) => item.username).join(',')}
               </span>
            </div>
         </div>
         <div className="my-2 border-t h-0 border-dashed"></div>

         <div className="w-full h-28 mt-4">
            <ResponsiveContainer width="100%" height="100%">
               <ComposedChart
                  data={chartData}
                  layout="vertical"
                  margin={{
                     right: 50,
                  }}
               >
                  <CartesianGrid strokeDasharray="3 3" />
                  <XAxis type="number" dataKey="value" />
                  <YAxis type="category" dataKey="name" />
                  <Bar
                     dataKey="value"
                     fill="#8884d8"
                     barSize={10}
                     label={{ position: 'right' }}
                  />
               </ComposedChart>
            </ResponsiveContainer>
         </div>

         <DetailBtnContainer>
            {group.createdBy === user._id && (
               <CircleContainer onClick={goEdit}>
                  <EditIcon type="primary" />
               </CircleContainer>
            )}
         </DetailBtnContainer>
      </>
   );
};
export default GroupDetail;
